<template>
  <Form class="form" ref="factoryForm" :rules="factoryRules" :model="factory" :label-width="100">
    <FormItem prop="factoryName" label="厂商名称：">
      <Input type="text" v-model="factory.factoryName" placeholder="请输入厂商名称"></Input>
    </FormItem>
    <FormItem prop="address" label="地址：">
      <Input type="text" v-model="factory.address" placeholder="请输入地址"></Input>
    </FormItem>
    <FormItem prop="people" label="联系人：">
      <Input type="text" v-model="factory.people" placeholder="请输入联系人"></Input>
    </FormItem>
    <FormItem prop="relations" label="联系方式：">
      <Input type="text" v-model="factory.relations" placeholder="请输入联系方式"></Input>
    </FormItem>
    <FormItem prop="complaintPeople" label="投诉部门：">
      <Input type="text" v-model="factory.complaintPeople" placeholder="请输入投诉部门"></Input>
    </FormItem>
    <FormItem prop="complaintType" label="投诉类型：">
      <Select v-model="factory.complaintType" placeholder="请选择投诉类型">
        <Option :value="1">1</Option>
        <Option :value="2">2</Option>
        <Option :value="3">3</Option>
      </Select>
    </FormItem>
    <FormItem>
      <Button type="primary" :loading="saveLoading" :disabled="disabled" @click="save">保存</Button>
    </FormItem>
  </Form>
</template>

<script>
  export default {
    name: "Factory",
    data() {
      // 验证手机号格式
      const validatePhone = (rule, value, callback) => {
        var regExp = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (value) {
          if (!regExp.test(value)) {
            callback(new Error("手机号码格式错误"));
          } else {
            callback();
          }
        } else {
          callback(new Error("请输入联系方式"));
        }
      };
      return {
        factory: {
          id: 0,
          userId: 0,
          factoryName: "",
          address: "",
          people: "",
          relations: "",
          complaintPeople: "",
          complaintType: 0,
        },
        // 表单验证规则
        factoryRules: {
          factoryName: [
            {required: true, message: "请输入厂商名称", trigger: 'blur'}
          ],
          address: [
            {required: true, message: "请输入地址", trigger: 'blur'}
          ],
          people: [
            {required: true, message: "请输入联系人", trigger: 'blur'}
          ],
          relations: [
            {required: true, validator: validatePhone, trigger: 'blur'}
          ],
          complaintPeople: [
            {required: true, message: "请输入投诉部门", trigger: 'blur'}
          ],
          complaintType: [
            {required: true, message: "请选择投诉类型", trigger: 'blur', type: 'number'}
          ]
        },
        // 按钮加载状态
        saveLoading: false,
        // 按钮禁用状态
        disabled: true
      }
    },
    watch: {
      factory: {
        handler(newValue, oldValue) {
          if (oldValue.userId) {
            this.disabled = false;
          }
        },
        deep: true
      }
    },
    methods: {
      getFactory() {
        this.$requests.get("/factory/get", null).then(res => {
          if (res.data.code === 0) {
            this.factory = res.data.data;
            setTimeout(() => {
              this.disabled = true;
            }, 100)
          }
        })
      },
      save() {
        this.$refs["factoryForm"].validate((valid) => {
          if (valid) {
            this.saveLoading = true;
            this.$requests.post("/factory/update", this.factory).then(res => {
              if (res.data.code === 0) {
                this.$Message.success("保存成功");
                this.getFactory();
              } else {
                this.$Message.error(res.data.msg);
              }
              setTimeout(() => {
                this.saveLoading = false;
              }, 500)
            })
          }
        })
      }
    },
    created() {
      this.getFactory();
    }
  }
</script>

<style lang="less" scoped>
  .ivu-form-item {
    margin-top: 40px;
  }
</style>
